@import 'variables/power-select';

@import 'reset';
@import 'classes';
@import 'highlight-theme';

@import 'html-components/button';
@import 'html-components/filters';
@import 'html-components/power-select';
@import 'html-components/pell';

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src:
    url('fonts/Inter-Thin.woff2') format('woff2'),
    url('fonts/Inter-Thin.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100;
  src:
    url('fonts/Inter-ThinItalic.woff2') format('woff2'),
    url('fonts/Inter-ThinItalic.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src:
    url('fonts/Inter-ExtraLight.woff2') format('woff2'),
    url('fonts/Inter-ExtraLight.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 200;
  src:
    url('fonts/Inter-ExtraLightItalic.woff2') format('woff2'),
    url('fonts/Inter-ExtraLightItalic.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src:
    url('fonts/Inter-Light.woff2') format('woff2'),
    url('fonts/Inter-Light.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  src:
    url('fonts/Inter-LightItalic.woff2') format('woff2'),
    url('fonts/Inter-LightItalic.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src:
    url('fonts/Inter-Regular.woff2') format('woff2'),
    url('fonts/Inter-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src:
    url('fonts/Inter-Italic.woff2') format('woff2'),
    url('fonts/Inter-Italic.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src:
    url('fonts/Inter-Medium.woff2') format('woff2'),
    url('fonts/Inter-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  src:
    url('fonts/Inter-MediumItalic.woff2') format('woff2'),
    url('fonts/Inter-MediumItalic.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src:
    url('fonts/Inter-SemiBold.woff2') format('woff2'),
    url('fonts/Inter-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  src:
    url('fonts/Inter-SemiBoldItalic.woff2') format('woff2'),
    url('fonts/Inter-SemiBoldItalic.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src:
    url('fonts/Inter-Bold.woff2') format('woff2'),
    url('fonts/Inter-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  src:
    url('fonts/Inter-BoldItalic.woff2') format('woff2'),
    url('fonts/Inter-BoldItalic.woff') format('woff');
}

@font-face {
  font-family: 'Fira Code';
  font-weight: 300;
  font-style: normal;
  src:
    url('fonts/FiraCode-Light.woff2') format('woff2'),
    url('fonts/FiraCode-Light.woff') format('woff');
}

@font-face {
  font-family: 'Fira Code';
  font-weight: 400;
  font-style: normal;
  src:
    url('fonts/FiraCode-Regular.woff2') format('woff2'),
    url('fonts/FiraCode-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Fira Code';
  font-weight: 500;
  font-style: normal;
  src:
    url('fonts/FiraCode-Medium.woff2') format('woff2'),
    url('fonts/FiraCode-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Fira Code';
  font-weight: 700;
  font-style: normal;
  src:
    url('fonts/FiraCode-Bold.woff2') format('woff2'),
    url('fonts/FiraCode-Bold.woff') format('woff');
}

::-moz-selection {
  background: var(--color-primary-opacity-10);
}

::selection {
  background: var(--color-primary-opacity-10);
}

html {
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  --font-monospace: 'Fira Code', 'SF Mono', SFMono-Regular, ui-monospace,
    'DejaVu Sans Mono', Menlo, Consolas, monospace;

  --screen-lg: 100%;
  --screen-md: 640px;
  --screen-sm: 440px;

  --border-radius: 6px;

  --accent-hue: 155;
  --accent-saturation: 67%;
  --accent-light: 48%;

  --text-color-normal: hsl(var(--accent-hue), 30%, 5%);

  --content-background: #fff;
  --content-background-border: #eaeaea;

  --html-background: #f7f7f7;
  --body-background: #f7f7f7;

  --logo-background: #eee;
  --logo-foreground: #bbb;

  --gradient-header-color: #eee;

  --input-border-color: #e0e0e0;
  --input-background: #fff;
  --input-color: #000;

  --background-light: #fafafa;
  --background-light-highlight: #eaeaea;

  --color-primary: #28cb87;
  --color-primary-hue: 155;
  --color-primary-saturation: 67%;
  --color-primary-darken-10: #1c9060;
  --color-primary-opacity-10: rgba(40, 203, 135, 0.1);
  --color-primary-opacity-20: rgba(40, 203, 135, 0.2);
  --color-primary-opacity-25: rgba(40, 203, 135, 0.25);
  --color-primary-opacity-50: rgba(40, 203, 135, 0.5);
  --color-primary-opacity-70: rgba(40, 203, 135, 0.7);

  --color-highlight-lighteness: 95%;

  --color-grey: #adadad;
  --color-black: #484848;
  --background-tooltip: #eee;
  --text-color-tooltip: #333;

  --color-green: #28cb87;
  --color-green-hue: 155;
  --color-green-saturation: 67%;

  --color-blue: #3f7cc5;
  --color-blue-hue: 213;
  --color-blue-saturation: 54%;

  --color-success: #45c86f;
  --color-success-hue: 139;
  --color-success-saturation: 54%;
  --color-success-opacity-10: rgba(142, 191, 164, 0.1);

  --color-warning: #e4b600;
  --color-warning-hue: 48;
  --color-warning-saturation: 100%;

  --color-socket: #2c4fb4;

  --color-error: #d84444;
  --color-error-hue: 0;
  --color-error-saturation: 65%;

  --shadow-color: rgba(0, 0, 0, 0.07);

  background: #eee;
}

html[data-theme='dark'] {
  --content-background: #191919;
  --content-background-border: #232323;

  --html-background: #191919;
  --body-background: #161616;

  --logo-background: #333;
  --logo-foreground: #777;

  --text-color-normal: hsl(var(--accent-hue), 3%, 80%);

  --gradient-header-color: #171717;

  --input-border-color: #333;
  --input-background: #111;
  --input-color: #fafafa;

  --background-light: #1f1f1f;
  --background-light-highlight: #3c3c3c;

  --shadow-color: rgba(0, 0, 0, 0.14);

  --color-highlight-lighteness: 12%;
  --color-black: #adadad;
  --color-grey: #616161;

  --background-tooltip: #111;
  --text-color-tooltip: #fff;

  background: #191919;
}

body {
  background: var(--html-background);
  color: var(--text-color-normal);
  font-family: var(--font-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

textarea,
select,
button,
input[type='submit'],
input[type='text'] {
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

dl,
dt,
dd {
  margin: 0;
}

textarea[disabled] {
  cursor: no-drop;
}

a {
  color: var(--color-primary);
}

input[type='checkbox'],
input[type='radio'] {
  appearance: none;
  position: relative;
  width: 1rem;
  height: 1rem;
  background: var(--content-background);
  accent-color: var(--content-background);
  border: 2px solid var(--color-grey);

  &:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);

    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      width: 0.6rem;
      height: 0.6rem;
      content: '';
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20405.272%20405.272%22%3E%3Cg%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M393.401%2C124.425L179.603%2C338.208c-15.832%2C15.835-41.514%2C15.835-57.361%2C0L11.878%2C227.836%20%20%20c-15.838-15.835-15.838-41.52%2C0-57.358c15.841-15.841%2C41.521-15.841%2C57.355-0.006l81.698%2C81.699L336.037%2C67.064%20%20%20c15.841-15.841%2C41.523-15.829%2C57.358%2C0C409.23%2C82.902%2C409.23%2C108.578%2C393.401%2C124.425z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
      background-size: 100%;
      color: var(--content-background);
    }
  }
}

input[type='checkbox'] {
  border-radius: var(--border-radius);
}

input[type='radio'] {
  border-radius: 18px;
}

emoji-picker {
  --num-columns: 9;
  --emoji-size: 1.3rem;
  --background: var(--background-light);
  --border-color: var(--background-light-highlight);
  --input-border-color: transparent;
  --input-padding: 4px 0;
  --outline-size: 0;
  --input-font-color: var(--text-color-normal);
  --input-placeholder-color: var(--color-grey);
  --indicator-color: hsl(var(--accent-hue), 55%, 55%);
  --button-hover-background: var(--background-light-highlight);
  --button-active-background: var(--background-light-highlight);
}

:global(.app) {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  background: var(--body-background);
}

:global(.tooltip) {
  position: relative;

  &:global(.tooltip--right) {
    &::before {
      margin-left: -5px;
      border-color: transparent var(--background-tooltip) transparent
        transparent;
    }

    &::after {
      margin-left: 7px;
    }

    &::before,
    &::after {
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &:global(.tooltip--top) {
    &::before {
      margin-top: 0;
      border-color: var(--background-tooltip) transparent transparent
        transparent;
    }

    &::after {
      left: 50%;
      top: -32px;
      transform: translateX(-50%);
    }

    &::before {
      left: 50%;
      top: -6px;
      transform: translateX(-50%);
    }
  }

  &::before {
    content: '';
    border: 6px solid;
  }

  &::after {
    position: relative;
    content: attr(title);
    text-transform: none;
    padding: 5px 10px;
    white-space: nowrap;
    border-radius: var(--border-radius);
    background: var(--background-tooltip);
    color: var(--text-color-tooltip);
    text-align: left;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 600;
  }

  &::before,
  &::after {
    position: absolute;
    pointer-events: none;
    transition: 0.3s opacity;
    opacity: 0;
  }

  &:hover::before,
  &:hover::after {
    opacity: 1;
  }
}

:global(.added) {
  padding: 0 1px;
  background: hsl(
    var(--color-green-hue),
    var(--color-green-saturation),
    var(--color-highlight-lighteness)
  );
  color: var(--color-green);
}

:global(.undiffable) {
  padding: 0 1px;
  background: var(--background-light-highlight);
  color: var(--color-gray);
}

:global(.removed) {
  padding: 0 1px;
  background: hsl(
    var(--color-error-hue),
    var(--color-error-saturation),
    var(--color-highlight-lighteness)
  );
  color: var(--color-error);
  text-decoration: line-through;
}
